<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花</title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        // $("#box").animate({
        //     width: 100,
        //     height: 100
        // }, 5000)

        function FireWork() {
            //此处this指向实例对象fw;
            this.container = document.querySelector("#box")
            //实例对象fw调用函数bindEvent;
            this.bindEvent();
        }

        FireWork.prototype.bindEvent = function () {
            //实例对象fw调用了原型对象中的普通函数bindEvent,所以此处的this指向为fw,将此处fw的this赋值给self变量
            var self = this;
            //给容器绑定事件；
            //主体烟花创建并运动到目标点；
            self.container.onclick = function (evt) {
                //时间对象的兼容
                var e = evt || event;
                //将实例对象调用函数createFireWork的结果赋值给变量fireWork
                var fireWork = self.createFireWork();
                //让元素有一个可靠的起始点;
                fireWork.style.left = evt.offsetX + "px";
                //运动;
                //运动结束有一个回调函数;
                $(fireWork).animate({
                    //获取鼠标点击的给fireWork盒子的top
                    top: evt.offsetY
                }, 800, function () {
                    //运动结果后删除这个盒子
                    fireWork.remove();
                })
            }
        }

        FireWork.prototype.createFireWork = function () {
            //1.创建一个div;
            //2.div放在页面之中;
            var div = document.createElement('div');
            //将类名ball赋给新增的div
            div.className = "ball";
            //给新增的div添加随机16进制背景色
            div.style.backgroundColor =
                `#${(Math.round(parseInt('ffffff',16)*Math.random()).toString(16)).padStart(6,'0')}`
            //将新增的div添加到实例对象中获取的dom元素container
            this.container.appendChild(div);
            //返回新创建的div元素
            return div;
        }

        FireWork.prototype.boom = function () {

        }

        var fw = new FireWork();
    </script>
</body>

</html>